// $(function(){
//     $('#fullpage').fullpage(

//     );
// });
$(function () {
  var h = $(window).height();//当前屏幕高度
  //点击next 往下播放一屏
  $(".next").click(function(e){
    $.fn.fullpage.moveSectionDown();
  })
    $('#fullpage').fullpage({ //fullpage 方法里面接收json对象形式 花括号表示对象
            navigation:true,
            loopBottom:true,
            loopTop:true,
            scrollingSpeed:1000,
            //回调函数
            //滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
            afterLoad: function(anchorLink, index){
              //next先消失
        
              if( index == 2){
                $(".next").fadeOut(); 
                //   alert("到第二屏了")
                $(".search").show().animate({"right":380},2000,"easeInOutElastic",function(){
                  // 方块进入  显示汉字
                  $(".search-words").animate({"opacity":1},200,function(){
                      $(".search").hide();
                      //显示完整搜索条 右上角缩小
                      $(".search-tiao").show().animate({"height":30,"right":250,"bottom":450},1500);
                      //同时沙发图片 变大
                      $(".shafas").show().animate({"height":218,},1500)
                      //同时 白色文字显示
                      $(".words2").animate({"opacity":1},1000,function(){
                        //next最后显示出来
                        $(".next").fadeIn(); 
                      })
                  });
                });
              }
            },
            //第三屏 刚开始滚动屏幕就触发的回调函数 onLeave
            //滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，
            //从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
            onLeave:function(index,nextIndex,direction ){
              $(".next").fadeOut(); 
                 // alert(1);
                 if( index == 2 && nextIndex == 3){
                  // alert(222);
                  //当第二屏幕滚动到第三屏幕时  沙发显示 并掉到第三屏幕 白盒子覆盖
                  //沙发往第三屏幕走 距离是当前屏幕高度-three到底部的高度 - 屏幕三沙发到three的距离
                  $(".shafa2").show().animate({"bottom":-(h - 250),"width":207,"left":260 } ,1500,function(){
                    $(".img-a").animate({"opacity":1},1000,function(){
                      $(".btn-a").animate({"opacity":1},200,function(){
                        $(".next").fadeIn();
                      });
                    })
                  });
                  $(".cover").show();
                 }

                 //第三屏幕到第四屏幕过渡
                 if( index == 3 && nextIndex == 4){
                  $(".shafa2").hide();
                  //沙发距离 距离是 =当前屏幕高度- 200 -50 + 第三屏幕50距离
                  $(".xieshafa").show().animate({"bottom":- (( h - 250) + 50),"left":250},2000,function(){
                    $(this).hide(); //动画完成后自动影藏
                    $(".car-shafa").show();
                    //购物车开始往右走
                    //换动动画要写在时间后面
                    $(".car").animate({"left": "150%"},4000,"easeInElastic",function(){
                      $(".adress").show();
                      $(".adress1,.words5").animate({"opacity":1},1500,function(){
                        $(".next").fadeIn();
                      })
                    })
                  })
                 }

                      //第四屏幕到第五屏幕过渡
                      if( index == 4 && nextIndex == 5){
                        //手上来
                        $(".hand").animate({"bottom":0},2000,function(){
                          //鼠标显示
                          // $(".mouse-a").fadeIn();
                          $(".mouse-a").animate({"opacity":1});
                          //斜沙发从800到70
                          $(".xieshafa5").show().animate({"bottom":70},1000,function(){
                            //bank 上来 走完之后文字翻转
                            $(".bank").animate({"bottom":390},1000,function(){
                                $(".words6").addClass("words6-a");
                                $(".next").fadeIn();
                            }
                            );
                          })
                        })
                       }

                          //第五屏幕到第六屏幕过渡
                      if( index == 5 && nextIndex == 6){
                        //沙发距离 = 当前屏幕高度 -500
                       $(".xieshafa5").animate({"bottom": - (h - 500),"left":"40%","width": 65},1500,function(){
                         $(".xieshafa5").hide();
                       });
                       $(".box").animate({"left":"38%"},1500,function(){
                         $(this).animate({"bottom": 40},1500,function(){
                          //  $(".box").hide();
                          //内部使用this也可以
                          $(this).hide();


                          //行走过程就是背景移动过程  使用  Jquery比较麻烦 支持backgroundPositionX
                          //  $(".section6").animate({"backgooundPosition":"100%" "100%"},5000) //测试无效
                          // $(".section6").animate({"backgroundPosition":"100%" "100%"},5000)
                          $(".section6").animate({"backgroundPositionX":"100%"},5000,function(){
                            //背景动画结束  boy出来
                            $(".boy").animate({"height":315,"bottom":116},1500,function(){
                              $(this).animate({"right": 500},1000, function(){
                                  //门显示出来
                                  // $(".door").show();
                                  $(".door").animate({"opacity":1},1000,function(){
                                    //门开后 女孩出来
                                    $(".girl").show().animate({"right":350,"height": 316},1500,function(){
                                      //plesae
                                      $(".please").animate({"opacity": 1},1500,function(){
                                        $(".next").fadeIn();
                                      });
                                   
                                    })
                                  })
                              })
                            })
                          });
                          //光速跑
                          $(".words7").show().animate({"left":"30%"},2000,"easeInOutElastic");
                          $(".pop").show();
                     
                         })
                       });
                       }

                            //第六屏幕到第七屏幕过渡
                      if( index == 6 && nextIndex == 7){
                        // $(".star").animate({"width":120},3000);
                        setTimeout(function(){
                          $(".star").animate({"width":120},2000,function(){
                            $(".good").animate({"opacity":1},1000);
                            $(".next").fadeIn();
                          });
                        },1500);
                      }

                      //第八屏动画
                      // $(".beginShop").mouseenter(function(e){
                      //     $(".btn-08a").show();
                      // }).mouseleave(function(e){
                      //   $(".btn-08a").hide();
                      // })
                        // hover替代更简洁
                      $(".beginShop").hover(function(){
                        $(".btn-08a").toggle();//toggle  现实和影藏的切换
                      });
                      //手跟随鼠标
                      $(document).mousemove(function(e){
                          //把鼠标在页面上的坐标给手
                          var x = event.pageX - $(".hand-08").width() / 2;//获取鼠标在页面中X坐标
                          var y = event.pageY + 10;//获取鼠标在页面中Y坐标
                          var minY = h - 449;
                          // if( y < minY){
                          //   $(".hand-08").css({"left": x,"top":minY});
                          //   // y = minY;
                          // }else{
                          //   $(".hand-08").css({"left": x,"top":y});
                          // }
                     
                          //简写
                          if( y < minY){
                            y = minY;
                          }
                            $(".hand-08").css({"left": x,"top":y});
                        
                      })

                      //再来一次
                      $(".once").click(function(e){
                          // alert(122)
                          // 1.返回第一屏
                          $.fn.fullpage.moveTo(1);
                             //2.动画复原 图片 清除行内样式 所有动画div盒子添加move
                             $("img,.move").attr("style","");
                      })
                   
            },
        });
});